<template>
  <div v-if="rows" @click="drawerTag = true">
    <el-button v-if="rows.length < 1" size="small">参数配置</el-button>
    <div v-else>
      <template v-for="row in rows" :key="row.name">
        <el-tag :color="$random.randomColor()">{{ row.name }}</el-tag>
      </template>
    </div>
  </div>
  <el-drawer v-model="drawerTag" title="请选择" :append-to-body="true">
    <template v-for="(row, _index) in rows" :key="_index">
      <el-row :gutter="10" style="margin-bottom: 20px">
        <el-col :span="5">
          <el-input
            size="small"
            v-model="row.name"
            placeholder="请输入参数"
          ></el-input>
        </el-col>
        <el-col :span="5">
          <el-input
            size="small"
            v-model="row.code"
            placeholder="请输入code"
          ></el-input>
        </el-col>
        <el-col :span="5">
          <ComSelece
            size="small"
            :dictList="dataTypes"
            v-model="row.data_type"
          ></ComSelece>
        </el-col>
        <el-col :span="9">
          <el-button size="small" @click="update(row)" type="primary">
            保存
          </el-button>
          <el-button size="small" @click="remove(row.id)" type="danger">
            删除
          </el-button>
        </el-col>
      </el-row>
    </template>
    <el-row :gutter="10">
      <el-col :span="6">
        <el-input
          size="small"
          v-model="newRow.name"
          placeholder="请输入参数"
        ></el-input>
      </el-col>
      <el-col :span="6">
        <el-input
          size="small"
          v-model="newRow.code"
          placeholder="请输入code"
        ></el-input>
      </el-col>
      <el-col :span="6">
        <ComSelece
          size="small"
          :dictList="dataTypes"
          v-model="newRow.data_type"
        ></ComSelece>
      </el-col>
      <el-col :span="6">
        <el-button
          size="small"
          style="margin-right: 10px"
          @click="handleAdd"
          type="primary"
        >
          保存
        </el-button>
      </el-col>
    </el-row>
  </el-drawer>
</template>
<script setup>
import { ref, defineProps } from "vue";
import use from "../useComponent";
import ToolActionApi from "@/tool/http/tool-action.js";
import ComSelece from "../com-select/com-select.vue";

const props = defineProps({
  defaultIds: {
    type: [Array, String],
    default: () => [],
  },
});

const emit = defineEmits(["update:defaultIds", "ntdChange"]);

const dataTypes = ref([]);
const drawerTag = ref(false);
const newRow = ref({});

const { rows, remove, sync } = use(
  {
    queryParam: {
      rules: {
        id__in: (props.defaultIds || []).join(","),
      },
    },
  },
  "common_param",
  (rowsWatch) => {
    emit(
      "update:defaultIds",
      rowsWatch.map((row) => row.id)
    );
    emit(
      "ntdChange",
      rowsWatch.map((row) => row.id)
    );
  }
);

ToolActionApi.enumDict("data_type").then((res) => {
  dataTypes.value = res;
});

const handleAdd = async () => {
  await sync(newRow.value);
  newRow.value = {};
};
</script>
